<template>
    <div style="height: 50px;">
        <el-button round @click="AddProcurementReturn()">保存</el-button>
    </div>

    <el-form :model="form" lclass="demo-form-inline" :inline="true">
        <el-form-item label="供应商名称">
            <el-input v-model="form.vName" style="width: 200px;" @dblclick="dialogVisible = true" />
        </el-form-item>
        <el-form-item label="采购人员">
            <el-input v-model="form.pPurchasingStaff" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="采购主题">
            <el-input v-model="form.purchaseReturnsTopic" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="退货人员">
            <el-input v-model="form.pReturnsPersonnel" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="单据编号">
            <el-input v-model="form.prDocumentNumber" placeholder="保存后自动生成" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="对方代表">
            <el-select v-model="form.prCountpartPeople" style="width: 200px;" placeholder="请选择对方代表">
                <el-option label="林雅南" value="林雅南" />
                <el-option label="刘柏宏" value="刘柏宏" />
                <el-option label="李中冰" value="李中冰" />
                <el-option label="黄文隆" value="黄文隆" />
                <el-option label="谢彦文" value="谢彦文" />
            </el-select>
        </el-form-item>
        <el-form-item label="我方代表">
            <el-input v-model="form.prPeople" style="width: 200px;"
                @dblclick="dialogVisible2 = true; GetSectorList()" />
        </el-form-item>
        <el-form-item label="退货方式">
            <el-input v-model="form.prReturnManner" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="退货地址">
            <el-input v-model="form.prReturnAddress" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="退货类别">
            <el-select v-model="form.prReturnType" style="width: 200px;" placeholder="请选择退货类别">
                <el-option label="产品质量" value="产品质量" />
                <el-option label="服务质量" value="服务质量" />
                <el-option label="超出需求" value="超出需求" />
                <el-option label="改变需求" value="改变需求" />
                <el-option label="其他原因" value="其他原因" />
            </el-select>
        </el-form-item>
        <el-form-item label="退货日期">
            <el-date-picker v-model="form.prReturnDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                style="width: 100%" />
        </el-form-item>
    </el-form>

    <div style="height: 50px;">
        <el-button round @click="addhang()">新增行</el-button>
    </div>

    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>规格</th>
                <th>数量</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check1" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="dialogVisible3 = true" />
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" /></td>
                <td><input v-model="item.pSpec" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.rpNum" type="text" style="height: 40px;width: 100%;text-align: center;"
                        @change="sumRPNum" /></td>
                <td><input v-model="item.rpPrice" @change="sumRPPrice" type="text"
                        style="height: 40px;width: 100%;text-align: center;" />
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 合计 -->
    <el-form :model="form" lclass="demo-form-inline" :inline="true" style="margin-top: 40px;">
        <el-form-item label="数量合计">
            <el-input v-model="form.prTotalQuantity" style="width: 200px;" :disabled="true" />
        </el-form-item>
        <el-form-item label="金额合计">
            <el-input v-model="form.pRtotalAmount" style="width: 200px;" :disabled="true" />
        </el-form-item>
    </el-form>


    <!-- 供应商名称弹框 -->
    <el-dialog v-model="dialogVisible" title="供应商名称" width="1000" style="height: 600px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="vNumber" label="供应商编号" align="center" />
                        <el-table-column prop="vName" label="供应商名称" align="center" />
                        <el-table-column prop="vendorTypeName" label="供应商分类" align="center" />
                        <el-table-column prop="sName" label="供应商省" align="center" />
                        <el-table-column prop="cName" label="供应商市" align="center" />
                        <el-table-column prop="vContact" label="联系人" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

    <!-- 我方代表弹框 -->
    <el-dialog v-model="dialogVisible2" title="我方代表" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick2" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mName" label="姓名" align="center" />
                        <el-table-column prop="sectorName" label="部门" align="center" />
                        <el-table-column prop="postName" label="岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible2 = false">
                保存
            </el-button>
        </template>
    </el-dialog>

    <!-- 产品名称 -->
    <el-dialog v-model="dialogVisible3" title="产品名称选择" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick3" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChange1">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pName" label="产品名称" align="center" />
                        <el-table-column prop="pNumber" label="产品编号" align="center" />
                        <el-table-column prop="pUnit" label="规格型号" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible3 = false">
                保存
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'

const dialogVisible = ref(false)    //供应商名称弹框
const dialogVisible2 = ref(false)   //我方代表
const dialogVisible3 = ref(false)   //我方代表

//随机数
const generateRandomNumber = () => {
    const a = Math.floor(100000 + Math.random() * 900000); // 生成一个 6 位的随机数
    sessionStorage.setItem('Vendor', JSON.stringify(a));
}

//添加
const form = reactive({
    "vName": "",
    "purchaseReturnsCode": "",
    "purchaseReturnsIds": "",
    "purchaseReturnsTopic": "",
    "pPurchasingStaff": "",
    "pReturnsPersonnel": "",
    "prDocumentNumber": "",
    "prPeople": "",
    "prCountpartPeople": "",
    "manpowerId": "",
    "prReturnType": "",
    "prReturnDate": "",
    "prReturnManner": "",
    "prReturnAddress": "",
    "prTotalQuantity": 0,
    "pRtotalAmount": 0,
    "prOutboundProgress": "",
    "prShipmentState": "",
    "rpNum": 0,
    "rpPrice": 0,
})

//全选
const ids = ref([])
const selectAll = ref(false)
const toggleSelectAll = () => {
    ids.value = []
    if (selectAll.value) {
        ids.value = check1.value.map(ele => ele.productId)
    }
}


//#region  供应商名称弹框

//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const formInline = reactive({
    vNumber: '',
    vName: '',
    date: '',
    provinceId: '',
    cityId: '',
    vIndustry: '',
    bPhone: '',
    vPhone: '',
    vContact: '',
    PageIndex: 1,
    PageSize: 10,
    fid: '',
})


//树形
const handleNodeClick = (data: Tree) => {
    console.log(data)
    formInline.fid = data.value
    table();
}

//供应商显示
var tableData = ref([]);
const table = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelectShow', {
        params: {
            FId: formInline.fid,
            Node: formInline.vNumber,
            Name: formInline.vName,
            Sid: formInline.provinceId,
            Cid: formInline.cityId,
            Hid: formInline.vIndustry,
            BPhone: formInline.bPhone,
            SPhone: formInline.vPhone,
            ZProper: formInline.vContact,
            ZProper: formInline.vContact,
            PageIndex: formInline.PageIndex,
            PageSize: formInline.PageSize
        }
    }).then(res => {

        if (res.data.code == 200) {
            tableData.value = res.data.data.list
        }
        console.log(tableData.value)
    })
}

//多选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    form.vName = check.value[0].vName
    console.log(check.value[0].vName)
}

//#endregion


//#region  我方代表

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 3,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/cg/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/cg/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: User[]) => {
    check2.value = val
    form.prPeople = check2.value[0].mName
    console.log(form.prPeople)
}


//#endregion


//#region  产品名称
const productPage = reactive({
    pindex: 1,
    psize: 100,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}


//多选框
const check1 = ref([])
const handleSelectionChange1 = (val: User[]) => {
    check1.value = val
    console.log(check1.value)
}


//点击新增行
const addhang = () => {
    check1.value.push({
        pName: '',
        pNumber: '',
        pUnit: '',
        rPNum: '',
        rpPrice: ''
    });
}


//#endregion


//输入数量change事件
const sumRPNum = (sum: number) => {
    console.log(sum)
    form.prTotalQuantity += Number(sum.srcElement.__vnode.dirs[0].value);
    console.log(form.prTotalQuantity)
}
//输入金额change事件
const sumRPPrice = (sum: number) => {
    console.log(sum)
    form.pRtotalAmount += Number(sum.srcElement.__vnode.dirs[0].value);
    console.log(form.pRtotalAmount)
}

//点击复选框获取选中的值
const selectedRows = ref([])
const huoqu = () => {
    if (ids.value) {
        selectedRows.value = check1.value.filter(item => item.productId);
    }
    console.log(selectedRows.value)
}

//反填
const FanProcurementReturn = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/FanProcurementReturn?PurchaseReturnsCode=' + route.query.PurchaseReturnsCode)
        .then(res => {
            console.log(res.data.data)
            let d = res.data.data;
            form.vName = d.vName;
            form.pPurchasingStaff = d.pPurchasingStaff;
            form.purchaseReturnsCode = d.purchaseReturnsCode;
            form.purchaseReturnsTopic = d.purchaseReturnsTopic;
            form.pReturnsPersonnel = d.pReturnsPersonnel;
            form.prCountpartPeople = d.prCountpartPeople;
            form.prPeople = d.prPeople; check1.value
            form.prReturnManner = d.prReturnManner;
            form.prReturnAddress = d.prReturnAddress;
            form.prReturnDate = d.prReturnDate;
            form.prReturnType = d.prReturnType;
            form.prTotalQuantity = d.prTotalQuantity;
            form.pRtotalAmount = d.pRtotalAmount;
            form.prDocumentNumber = d.prDocumentNumber;
            form.rpNum = d.rpNum;
            form.rpPrice = d.rpPrice;
            check1.value = d.productLists;
            console.log(check1.value)

        })
}



//修改采购退货
const AddProcurementReturn = () => {
    var model = {
        purchaseReturnsIds: route.query.purchaseReturnsIds,
        purchaseReturnsCode: form.purchaseReturnsCode,
        purchaseReturnsTopic: form.purchaseReturnsTopic,
        vName: form.vName,
        pPurchasingStaff: form.pPurchasingStaff,
        pReturnsPersonnel: form.pReturnsPersonnel,
        prDocumentNumber: form.prDocumentNumber,
        prPeople: form.prPeople,
        prCountpartPeople: form.prCountpartPeople,
        manpowerId: 0,
        prReturnType: form.prReturnType,
        prReturnDate: form.prReturnDate,
        prReturnManner: form.prReturnManner,
        prReturnAddress: form.prReturnAddress,
        prTotalQuantity: form.prTotalQuantity,
        pRtotalAmount: form.pRtotalAmount,
        prOutboundProgress: 0,
        prShipmentState: 0,
        office_Id: '0',
        user_Id: 0,
        returnProductLists: selectedRows.value.map(item => ({
            productId: item.productId,
            purchaseReturnsCode: form.purchaseReturnsCode,
            rpNum: item.rpNum,
            rpPrice: item.rpPrice,
            office_Id: '0',
            user_Id: 0,
        }))
    }
    console.log(model)
    axios.post(http.zblnb + '/cg/api/ProcurementReturn/UpdProcurementReturn', model)
        .then(res => {
            console.log(res.data)
            if (res.data.data > 0) {
                ElMessage.success('修改成功');
                router.push('/ListPurchaseReturns');
            }
            else {
                ElMessage.error('修改失败');
            }
        })
}



onMounted(() => {
    FanProcurementReturn();//反填
    generateRandomNumber();
    getVendorType();    //显示供应商
    GetManpowerList();  //显示人员档案
    ProductList();  //显示产品列表
    table();    //供应商显示
})


const defaultProps = {
    children: 'children',
    label: 'label',
}




</script>

<style></style>